<template>
    <div class="fullscreen-container">
        <button @click="toggleFullscreen">
            <img v-if="!isFullscreen" title="全屏" src="./assets/icon-full-screen.png" alt="">
            <img v-if="isFullscreen" title="退出全屏" src="./assets/icon-exit-full-screen.png" alt="">
        </button>
        <button @click="unfoldFold">
            <img v-if="!unfoldFoldShow" title="收起" src="./assets/icon-1.png" alt="">
            <img v-if="unfoldFoldShow" title="展开" src="./assets/icon-2.png" alt="">
        </button>
    </div>
</template>

<script>
import { fullscreen } from './js/fullscreen.js';

export default {
  name: 'FullscreenDemo',
  data() {
    return {
      isFullscreen: false,
      unfoldFoldShow: true
    };
  },
  mounted() {
    // 初始化检查全屏状态
    this.isFullscreen = fullscreen.isFullscreen();
    
    // 监听全屏变化
    this.removeFullscreenListener = fullscreen.onChange(() => {
      this.isFullscreen = fullscreen.isFullscreen();
    });
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    if (this.removeFullscreenListener) {
      this.removeFullscreenListener();
    }
  },
  methods: {
    async toggleFullscreen() {
      try {
        let container = document.querySelector('#fullscreenId')
        await fullscreen.toggle(container);
      } catch (error) {
        console.error('全屏操作失败:', error);
        this.$message.error('全屏操作失败');
      }
    },
    unfoldFold() {
        this.unfoldFoldShow = !this.unfoldFoldShow
        this.$emit('unfoldFold', this.unfoldFoldShow)
    },
  }
};
</script>

<style scoped lang="scss">
.fullscreen-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  button {
      width: 30px;
      height: 30px;
      background: #409eff78;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      padding: 0;
      img {
          width: 100%;
          height: 100%;
      }
      &:nth-child(n+2){
          margin-left: 5px;
      }
  }
  button:hover {
      background: #66b0ff4f;
  }
}
</style>